<template>
  <div>
    <a-form-item
      v-if="
        [
          'text',
          'input',
          'textarea',
          'date',
          'time',
          'number',
          'radio',
          'checkbox',
          'select',
          'rate',
          'switch',
          'slider',
          'uploadImg',
          'uploadFile',
          'cascader',
          'treeSelect'
        ].includes(v.type)
      "
      :label-col="
        formConfig.layout === 'horizontal'
          ? formConfig.labelLayout === 'flex'
            ? { style: `width:${formConfig.labelWidth}px` }
            : formConfig.labelCol
          : {}
      "
      :wrapper-col="
        formConfig.layout === 'horizontal'
          ? formConfig.labelLayout === 'flex'
            ? { style: 'width:1px; flex:1' }
            : formConfig.wrapperCol
          : {}
      "
      :style="formConfig.layout === 'horizontal' && formConfig.labelLayout === 'flex' ? { display: 'flex' } : {}"
      :required="v.rules && v.rules[0].required && this.activeList.includes(v.pk)"
      :class="
        v.options.disabled == false || ([1, 2, 3, 4].includes(v.options.pattern) && v.options.disabled == true)
          ? 'itemBox'
          : ''
      "
      :colon="!!v.options.showLabel"
    >
      <!-- {{v.options.pattern}} ---  {{v.options.disabled}} --- {{v.pk}} --- {{formData}}  -->
      <!-- 表单lable气泡 -->
      <span v-if="v.label && ['text', 'batch'].includes(v.type) == false" slot="label">
        <a-tooltip>
          <span v-text="!v.options.showLabel ? '' : v.label"></span>
          <span slot="title" v-html="!v.options.showLabel ? '' : v.label"></span>   
        </a-tooltip>
      </span>
      <div
        class="formItemBox"
        v-if="v.type == 'text'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <textCol :label="v.label" :span="v.span" :styles="v.options" :options="v.options"></textCol>
      </div>

      <div
        v-else-if="v.type == 'input'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <inputCol
          :label="v.label"
          :span="v.span"
          :options="v.options"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
        ></inputCol>
      </div>

      <div
        v-else-if="v.type == 'number'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <numberCol
          :label="v.label"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :span="v.span"
          :options="v.options"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
        ></numberCol>
      </div>

      <div
        v-else-if="v.type == 'checkbox'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <checkboxCol
          :label="v.label"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :span="v.span"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
          :options="Object.assign(v.options, v.dynamic, v.dynamicKey)"
        ></checkboxCol>
      </div>

      <div
        v-else-if="v.type == 'textarea'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <textareaCol
          :label="v.label"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :span="v.span"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
          :options="v.options"
        ></textareaCol>
      </div>

      <div
        v-else-if="v.type == 'radio'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <radioCol
          :label="v.label"
          :span="v.span"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :options="Object.assign(v.options, v.dynamic, v.dynamicKey)"
        ></radioCol>
      </div>

      <div
        v-else-if="v.type == 'select'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <selectCol
          :label="v.label"
          :span="v.span"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :options="Object.assign(v.options, v.dynamic, v.dynamicKey)"
        ></selectCol>
      </div>

      <div
        v-else-if="v.type == 'date'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <datetimeCol
          :label="v.label"
          :span="v.span"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
          :startDate="v.startDate ? v.startDate.replace('/', '-') : null"
          :endDate="v.endDate ? v.endDate.replace('/', '-') : null"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :options="v.options"
        ></datetimeCol>
      </div>

      <div
        v-else-if="v.type == 'time'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <timeCol
          :label="v.label"
          :span="v.span"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :options="v.options"
        ></timeCol>
      </div>

      <div
        v-else-if="v.type == 'uploadImg' || v.type == 'uploadFile'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <uploadCol
          :fileType="v.type"
          :label="v.label"
          :span="v.span"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
          :prop="v.pk"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :options="v.options"
        ></uploadCol>
      </div>

      <div
        v-else-if="v.type == 'treeSelect'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <treeCol
          :label="v.label"
          :span="v.span"
          :prop="v.pk"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :options="v.options"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
        >
        </treeCol>
      </div>

      <div
        v-else-if="v.type == 'cascader'"
        @dblclick="rowDbclick(v)"
        @mouseover="rowMouseOver(v)"
        @mouseleave="resMouseleave(v)"
      >
        <cascaderCol
          :label="v.label"
          :span="v.span"
          :prop="v.pk"
          :required="this.activeList.includes(v.pk) ? v.rules[0].required : false"
          :options="v.options"
          v-on="$listeners"
          :value="formData[v.pk]"
          :activeList="activeList"
        >
        </cascaderCol>
      </div>
    </a-form-item>

    <!-- 不需要表单的项 -->
    <div v-else>
      <a-form-model-item v-if="v.type == 'button' && !v.options.hidden && [3, 5].includes(pattern)">
        <a-button  @click="btnClick(v.options.dynamicFun || null)" :type="v.options.type" :disabled="false">
          {{ btnText(v.label) }}
        </a-button>
      </a-form-model-item>
      <!-- {{v.type}} {{nowStepid}} {{pattern}} -->
      <!-- <div>分割线{{v.options}}</div> -->
      <dividerCol v-else-if="v.type == 'divider'" :label="v.label" :options="v.options"></dividerCol>

      <dynamicTable
        v-else-if="v.type == 'batch' && (nowStepid || [1, 4].includes(pattern))"
        ref="dynamicRef"
        :span="v.span"
        :title="v.label"
        :children="v.list"
        :table_options="v.options"
        :value="formData[v.pk]"
        :activeList="activeList"
        :formJson="formJson"
        :pattern="pattern"
        v-on="$listeners"
        :FactiveItem="FactiveItem"
        :childrenFormData="childrenFormData"
        :defaultHidden="defaultHidden"
        :fieldMap="fieldMap"
        :nowStepid="nowStepid"
      ></dynamicTable>
    </div>
  </div>
</template>

<script>
import textCol from '@/views/FormAssembly/textCol.vue'
import inputCol from '@/views/FormAssembly/inputCol.vue'
import checkboxCol from '@/views/FormAssembly/checkboxCol.vue'
import numberCol from '@/views/FormAssembly/numberCol.vue'
import textareaCol from '@/views/FormAssembly/textareaCol.vue'
import radioCol from '@/views/FormAssembly/radioCol.vue'
import selectCol from '@/views/FormAssembly/selectCol.vue'
import datetimeCol from '@/views/FormAssembly/datetimeCol.vue'
import timeCol from '@/views/FormAssembly/timeCol.vue'
import uploadCol from '@/views/FormAssembly/uploadCol.vue'
import dynamicTable from '@/views/FormAssembly/dynamicTable.vue'
import treeCol from '@/views/FormAssembly/treeCol.vue'
import cascaderCol from '@/views/FormAssembly/cascaderCol.vue'
import dividerCol from '@/views/FormAssembly/dividerCol.vue'
import { getBtnText } from '@/utils/formassembly/buttonconfig.js'
export default {
  components: {
    textCol,
    inputCol,
    checkboxCol,
    numberCol,
    textareaCol,
    radioCol,
    selectCol,
    datetimeCol,
    uploadCol,
    dynamicTable,
    treeCol,
    cascaderCol,
    dividerCol,
    timeCol
  },
  props: {
    // 当前环节
    nowStepid: {
      type: String,
      default: ''
    },
    // 表单环节配置的数据
    fieldMap: {
      type: Object,
      default: () => ({})
    },
    // 表单项
    v: {
      type: Object,
      required: true
    },
    // 背景激活项
    FactiveItem: {
      type: String
    },
    // 表单json
    formJson: {
      type: Object,
      default: () => ({})
    },
    // 表单数据Map
    formData: {
      type: Object,
      default: () => ({})
    },
    formConfig: {
      type: Object,
      required: true
    },
    // 是否是渲染模式
    pattern: {
      type: Number,
      default: 3
    },
    // 需要背景激活的项
    FactiveItem: {
      type: String,
      default: ''
    },
    // 需要显示的
    activeList: {
      type: Array,
      default () {
        return []
      }
    },
    // 操作模式下回显数据
    childrenFormData: {
      type: Object,
      default () {
        return {}
      }
    },
    // 永久隐藏的表单项
    defaultHidden: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  created () {
    // console.log('爷爷给的事件: ', this.$listeners)
    //  console.log('-------11111', this.activeList)
  },
  methods: {
    // 获取定义按钮的文本信息
    btnText (lable) {
      return getBtnText(lable, this)
    },
    // 按钮组件的点击事件
    btnClick (value) {
      this.$listeners.f_btnClick(value)
    },
    // 父组件调用, 触发校验
    fTableCheck (record) {
      // 为动态表格才去触发校验
      // console.log('子表格校验***', record.type)
      if (record.type == 'batch') {
        if (this.$refs.dynamicRef != undefined) {
          this.$listeners.fSetSonState(this.$refs.dynamicRef.validateF())
        }
        // this.$listeners.fSetSonState(this.$refs.dynamicRef.validateF())
      }
    },
    // 字段绑定模式下, 鼠标移入
    rowMouseOver (item) {
      if (this.pattern == 1) {
        this.$listeners.rowMouseOver(item)
      }
    },
    // 字段绑定模式下, 鼠标移出
    resMouseleave (item) {
      if (this.pattern == 1) {
        // console.log('移出', item)
        this.$listeners.resMouseleave(item)
      }
    },
    // 字段绑定模式下, 双击添加
    rowDbclick (item) {
      if (this.pattern == 1) {
        this.$listeners.rowDbclick(item)
      }
    }
  }
}
</script>

<style scoped>
.itemBox {
  /* border: 1px solid blue; */
  margin: 5px !important;
}
.formItemBox:hover {
  cursor: pointer;
}
</style>
